<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <button id="btn1">改变数组</button>
  <button id="btn2">改变对象</button>
  <button id="btn3">改变基础类型</button>
  <script type="module">
    import Vue from './index.js'
    Vue.mixin({
      data() {
        return {
          aaa: 1
        }
      },
      watch: {
        aaa(val) {
        }
      },
      created() {
        console.log("我是全局混入");
      }
    })

    Vue.component("parent-component", {
    template: `<div>我是全局组件</div>`,
  });

    window.vm = new Vue({
      el: "#app",
      data: function() {
        return {
          a: 1,
          b: 2,
          arr: [1,2, {name: 'likun'}],
          obj: { b: [1], sss: 'ssss' },
          c:{cc: [1,2,[3,4,[5,6]]]}
        }
      },
      computed: {
        myComputed() {
          console.log(123);
          return this.b + 'age'
        }
      },
      watch: {
        a(newValue, old) {
          console.log('123watcher: ', newValue , old);
        }
      },
      template: `<div id="a">
        基础类型:{{a}}, 数组: {{arr}}, 对象: {{obj}} 
        计算属性: {{myComputed}}
        <p>
          <div><span>fdasfa</span></div>  
          <parent-component><parent-component>
        </p>
        </div>`
    })
    console.log(vm);
    // vm.$set()
    let btn1 = document.getElementById('btn1')
    let btn2 = document.getElementById('btn2')
    let btn3 = document.getElementById('btn3')
    btn1.addEventListener('click', function() { 
      vm.arr.splice(1, 1, 'sssss')
    })
    btn2.addEventListener('click', function() {
      vm.obj.sss = 222
    })
    btn3.addEventListener('click', function() {
      vm.b = 'likun'
    })

    const options = {
      data: {}
    }
    let instance = null
    function VueTest(options) {
      console.log(options.data);
      if(!instance) {
        instance = this
        options.data.bbb = 123
      }
    }
    new VueTest(options)
    new VueTest(options)
  </script>
</body>
</html>